/*
@功能：购物车页面js
@作者：diamondwang
@时间：2013年11月14日
*/

$(function(){
	
	//减少
	$(".reduce_num").click(function(){
		var amount = $(this).parent().find(".amount");
		if (parseInt($(amount).val()) <= 1){
			alert("商品数量最少为1");
		} else{
			$(amount).val(parseInt($(amount).val()) - 1);
		}
		//小计
		var subtotal = parseFloat($(this).parent().parent().find(".col3 span").text()) * parseInt($(amount).val());
		$(this).parent().parent().find(".col5 span").text(subtotal.toFixed(2));
		//总计金额
		var total = 0;
		$(".col5 span").each(function(){
			total += parseFloat($(this).text());
		});

		$("#total").text(total.toFixed(2));
	});

	//增加
	$(".add_num").click(function(){
		var amount = $(this).parent().find(".amount");
		$(amount).val(parseInt($(amount).val()) + 1);
		//小计
		var subtotal = parseFloat($(this).parent().parent().find(".col3 span").text()) * parseInt($(amount).val());
		$(this).parent().parent().find(".col5 span").text(subtotal.toFixed(2));
		//总计金额
		var total = 0;
		$(".col5 span").each(function(){
			total += parseFloat($(this).text());
		});

		$("#total").text(total.toFixed(2));
	});

	//直接输入
	$(".amount").blur(function(){
		if (parseInt($(this).val()) < 1){
			alert("商品数量最少为1");
			$(this).val(1);
		}
		//小计
		var subtotal = parseFloat($(this).parent().parent().find(".col3 span").text()) * parseInt($(this).val());
		$(this).parent().parent().find(".col5 span").text(subtotal.toFixed(2));
		//总计金额
		var total = 0;
		$(".col5 span").each(function(){
			total += parseFloat($(this).text());
		});

		$("#total").text(total.toFixed(2));

	});


	  //这是购物车接口
let	token = localStorage.getItem('token') || '861a00333edae4e5ccbaa69718ac2d552906'
$.get('http://kg.zhaodashen.cn/v1/cart/index.jsp',{token},res=>{
  console.log(res)
  let tfoot = ''
  let tbody = ''
  let sum =0
  console.log(res)
  if(res,res.meta.state == 200){
    let num =0
    $(res.data).each((index,item)=>{
      num =item.goods_price*item.goods_number
      img = item.imgs[0] ? item.imgs[0].img_url : ''
      tbody +=`
        <tr id=${item.goods_id}>
        <td class="col1"><a href=""><img src="http://tmp00001.zhaodashen.cn/${img}" alt=""/></a>  <strong><a href="">${item.goods_name}</a></strong></td>
        <td class="col2"> <p>颜色：073深红</p> <p>尺码：170/92A/S</p> </td>
        <td class="col3">￥<span>${item.goods_price}</span></td>
        <td class="col4"> 
          <a href="javascript:;" class="reduce_num"></a>
          <input type="text" name="amount" value="${item.goods_number}" class="amount"/>
          <a href="javascript:;" class="add_num"></a>
        </td>
        <td class="col5">￥<span>${num}</span></td>
        <td class="col6"><a >删除</a></td>
      </tr>

      `
      sum += num
    })
    tfoot += `
      <tr>
        <td colspan="6">购物金额总计： <strong>￥ <span id="total">${sum}</span></strong></td>
      </tr>
    `
    $('tbody').append(tbody)
    $('tfoot').append(tfoot)
  }

},'json')

let value = $('.amount').val()
console.log(value)
//设置加+，减-，正则判断value
$('tbody').on('click','.add_num',function(){
   // this .add +  JS标签对象
   // 1-获取到前一个兄弟数字，
   var num = $(this).prev().val()
  //  console.log(num)  // 页面获取的都是字符串
   // 2-增1 ，
   num = parseInt(num) + 1 // 举例：当num结果是a1  就会变成 NaN+1 结果还是NaN
   if (isNaN(num)) num = 1 
   // 3-再放进去
   $(this).prev().val(num)

   //更改数据库里的数据
   let goodsId = $(this).parents('tr').attr("id");
    console.log(goodsId)
    let buyNum = num
    $.post('http://kg.zhaodashen.cn/v1/cart/update.jsp',{goodsId,buyNum,token},res=>{
        console.log(res);
    },'json')
    total()
})
$('tbody').on('click','.reduce_num',function(){
  // this -标签  JS标签对象

  // 1-获取到后一个兄弟数字，
  var num = $(this).next().val() 
  // 2-减1 ，
  num = parseInt(num) - 1    // 2  1  0
  if (isNaN(num) || num < 1) num = 1 
  // 3-再放进去
  $(this).next().val(num)
  
  //更改数据库里的数据
  let goodsId = $(this).parents('tr').attr("id");
  console.log(goodsId)
  let buyNum = num
  $.post('http://kg.zhaodashen.cn/v1/cart/update.jsp',{goodsId,buyNum,token},res=>{
    console.log(res);
  },'json')
  
  total()
})

// input框键松开
// 步骤1：给商品数量input框 增加 键盘松开事件
// 步骤2：在键盘松开事件中 -> 1-获取数据，2-正则过滤非数字替换掉，3-小于1重置为1，4-再放进去
$('tbody').on('keyup', '.amount', function(){
  // this 代表 .num input框  JS标签对象

  // 1-获取数据，
  var num = $(this).val()
  // 2-正则过滤非数字替换掉，
  num = num.replace(/[^0-9]/g, '')
  // console.log(num)
  // 3-小于1重置为1，
  if (isNaN(num) || num < 1) num = 1
  // 4-再放进去
  $(this).val(num)



   //更改数据库里的数据
   let goodsId = $(this).parents('tr').attr("id");
   console.log(goodsId)
   let buyNum = num
   $.post('http://kg.zhaodashen.cn/v1/cart/update.jsp',{goodsId,buyNum,token},res=>{
       console.log(res);
   },'json')
   total()
})

// 删除点击事件，使用事件代理
$('tbody').on('click','.col6>a',function(){
	let goods_id = $(this).parents('tr').attr("id");
	$.post('http://kg.zhaodashen.cn/v1/cart/delete.jsp',{token,goods_id},res=>{
		if(res.meta.state === 200){
			alert(res.meta.msg)
		}else{
			alert(res.meta.msg)
		}
	},'json')
	$(this).parents('tr').remove()
})



  $('.checkout').click(function(){
    $(this).attr("href","./flow2.html");
  })
  console.log(checkout)
  $('.continue').click(function(){
    $(this).attr("href","./index.html");
  })

  //创建一个函数，存放累加件数和求一共多少钱
  function total(){
    let countSum = 0
    $('.amount').each((index,item)=>{
      let num = $(item).val()
      let sum = parseInt($(item).parents('tr').find('.col3>span').text())*num
      $(item).parents('tr').find('.col5>span').text(sum)
      countSum += sum
      console.log(sum,countSum)
    })
    $('#total').html(countSum)
  }
});